﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fly Animate demo</title>
    <style type="text/css">
        textarea
        {
            width: 90%;
            height: 150px;
        }
        .div
        {
            box-shadow: 0px 0px 20px #eeeeee;
            background-color: Gray;
            height: 50px;
            width: 200px;
            position: absolute;
            position:fixed;
            z-index: 100;
            color: Yellow;
            text-align: center;
            padding-top: 20px;
            font-weight: bold;
        }
    </style>
    <script src="../../../fly/fly.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                var js = $(this).find("<2").find('textarea').val();
                eval(js);
                return false;
            })

            document.ondblclick = function () {
                $("div:first").animate({ left: 300 });
                //                $("div").fadeOut('normal', function () {
                //                    $("div").fadeIn("fast")
                //                });
            }


            var divs = $("div").filter("div")
            var divs = $("div").filter(function (o) {
                return o.innerText.indexOf('2')>-1;
            }
            )
        });


    </script>
</head>
<body>
    <a href=# onclick='$("div").stop(null,false)'>Stop All</a>
    <div class='div'>
        Fly Animate demo Box1</div>

        <div class='div' style="top:100px">
        Box 2</div>
    <table width="100%">
        <tr>
            <td>
                <textarea>
                $("div").fadeOut('normal', function () {
                    $("div").fadeIn("fast")
                });
                </textarea>
            </td>
            <td>
                <button>
                    Play</button>
            </td>
        </tr>
        <tr>
            <td>
                <textarea>
                    $("div").fadeTo(.5);
                </textarea>
            </td>
            <td>
                <button>
                    Play</button>
            </td>
        </tr>
        <tr>
            <td>
                <textarea>
                $("div").animate({
                                    props: {
                                        width: {
                                            from: 200, to: 800
                                        },
                                        height: {
                                            from: 80, to: 800
                                        },
                                        //top: {  to: '+=200' }
                                        opacity: 'hide',
                                        before:'show'
                                    },
                                    quality: 6,
                                    duration: 1000,
                                    easing: fly.ui.Animate.easings.backIn
                                });
                </textarea>
            </td>
            <td>
                <button>
                    Play</button>
            </td>
        </tr>
        <tr>
            <td>
                <textarea>
                    $("div").animate({
                            top:{to:'+=300',from:20}
                        },
                        'fast',fly.ui.Animate.easings.backIn
                    );
                </textarea>
            </td>
            <td>
                <button>
                    Play</button>
            </td>
        </tr>
       
    </table>
</body>
</html>
